<template>
    <div style="padding: 20px;">
        <el-form :model="productSp" label-width="auto" style="max-width: 400px; min-height: 100px;">
            <el-form-item label="标题">
                <el-input v-model="productSp.title"/>
            </el-form-item>
            <el-form-item label="分类">
                <el-select v-model="productSp.category_title" placeholder="请选择" style="width: 400px" @change="getCategory">
                <el-option
                v-for="item in category"
                :key="item.index"
                :label="item.title"
                :value="item.id"
                />
                </el-select>            
            </el-form-item>
            <el-form-item label="规格">
                <el-input v-model="productSp.serial" />
            </el-form-item>
            <el-form-item label="简介">
                <el-input 
                v-model="productSp.introduce" 
                type="textarea" 
                style="height: 150px;"
                :autosize="{ minRows: 6, maxRows: 8 }"
                />
            </el-form-item>
            <el-form-item label="封面图片">
                <el-upload
                    ref="uploadCover"
                    class="upload-demo"
                    :action="uploadImgurl"
                    :show-file-list="false"
                    :headers="headersAdmin" 
                    :on-success="handleUploadImgSuccess"
                    :on-exceed="handleExceed"
                    :auto-upload="true"
                >
                    <template #trigger>
                        <div style="margin: 10px;">
                            <el-button type="primary">选择图片</el-button>
                        </div>
                    </template>
                    <div class="demo-image__preview">
                        <el-image
                        style="width: 100px; height: 100px"
                        :src="productSp.cover"
                        :zoom-rate="1.2"
                        :max-scale="7"
                        :min-scale="0.2"
                        :preview-src-list="coverSrcList"
                        :initial-index="4"
                        fit="cover"
                        />
                    </div>
                </el-upload>
            </el-form-item>
            <el-form-item label="参数图片">
                <el-upload
                    ref="uploadParams"
                    class="upload-demo"
                    :action="uploadImgurl"
                    :show-file-list="false"
                    :headers="headersAdmin" 
                    :on-success="handleUploadImgSuccessParams"
                    :on-exceed="handleExceedParams"
                    :auto-upload="true"
                >
                    <template #trigger>
                        <div style="margin: 10px;">
                            <el-button type="primary">选择图片</el-button>
                        </div>
                    </template>
                    <div class="demo-image__preview">
                        <el-image
                        style="width: 100px; height: 100px"
                        :src="productSp.content"
                        :zoom-rate="1.2"
                        :max-scale="7"
                        :min-scale="0.2"
                        :preview-src-list="paramsSrcList"
                        :initial-index="4"
                        fit="cover"
                        />
                    </div>
                </el-upload>
            </el-form-item>
        </el-form>
        <div style="text-align: center; margin-top: 20px;">
            <el-button 
                type="primary"
                @click="()=>router.push({path:'/product'})">返回
            </el-button>
            <el-button 
                type="primary"
                @click="onSubmitProduct">提交
            </el-button>
        </div>
    </div>
</template>


<script setup>
import {ref, onBeforeMount} from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';
import { productListApi, categoryApi, productAddApi,uploadImgurl } from '@/requests';
const loading = ref(false);
const token = window.localStorage.getItem("token");
const headersAdmin = {
    Authorization: `Bearer ${token}`
};
const uploadCover = ref();
const uploadParams = ref();
const router = useRouter();
const route = useRoute();
const productSp = ref({
    id: null,
    title: null,
    category: null,
    category_title: null,
    serial: null,
    introduce: null,
    cover: null,
    content: null
});
const cover = ref();
const coverSrcList = ref([])

const params = ref();
const paramsSrcList = ref([])
const category = ref();

// 获取产品列表
const getProductList = async ()=>{
    loading.value = true;
    var id = route.query.id;
    const res = await productListApi({"id": id});
    if (res.status === 2000){
        var data = res.data;
        productSp.value.id = data.id;
        productSp.value.title = data.title;
        productSp.value.category = data.category;
        productSp.value.category_title = data.category_title;
        productSp.value.serial = data.serial;
        productSp.value.introduce = data.introduce;
        productSp.value.cover = data.cover;
        productSp.value.content = data.content;
    }else{
        ElMessage.error("获取产品列表失败")
    };
    loading.value = false;
};


// 获取一级分类列表
const forCategory = async () =>{
    const res = await categoryApi();
    if (res.status === 2000){
        category.value = res.data;
    }else{
        ElMessage.error("获取列表失败");
    };
};
// 下拉框动作
const getCategory = (value)=>{
    productSp.value.category = value;
}
onBeforeMount(()=>{
    forCategory();
    getProductList();
})
const handleExceed = (files) => {
};
const handleExceedParams = (files)=>{}
// 上传封面
const handleUploadImgSuccess = (res, uploadFile)=>{
    if (res.status === 2000){
        var data = res.data;
        productSp.value.cover = data.url;
        coverSrcList.value = []
        coverSrcList.value.push(cover.value)
    };
}
// 上传参数
const handleUploadImgSuccessParams = (res, uploadFile)=>{
    if (res.status === 2000){
        var data = res.data;
        productSp.value.content = data.url;
        paramsSrcList.value = []
        paramsSrcList.value.push(params.value)
    };
}

// 提交
const onSubmitProduct = async() =>{
    const res = await productAddApi(productSp.value);
    if (res.status === 2000){
        ElMessage.success("操作成功");
        productSp.value.id = null;
        productSp.value.title = null;
        productSp.value.category = null;
        productSp.value.category_title = null;
        productSp.value.serial = null;
        productSp.value.introduce = null;
        productSp.value.cover = null;
        productSp.value.content = null;
        // 跳转到产品页面
        router.push({path: "/product"});
    }else{
        ElMessage.error(res.msg);
    };
};
</script>

<style scoped>

</style>